<!--
 * @Author: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @Date: 2024-07-23 14:00:37
 * @LastEditors: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @LastEditTime: 2024-07-23 18:51:40
 * @FilePath: \za-workbench-main\src\views\test\components\elTable\elTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
 <div class="table-container">
  <el-table :data="props.tableData" stripe style="width: 100%" :border="true" @selection-change="handleSelectionChange">
    <template v-for="(item,index) in props.dataConfig" :key='index'>
      <slot v-if="item.slotName" :name="item.slotName" />
      <el-table-column  v-else-if="item.type && item.type==='selection'"
      :type="item.type"
      width="55"/>
      <el-table-column v-else  :prop="item.prop" :label="item.label" :width="item.width?item.width:'auto'" />
    </template>

  </el-table>
  <div class="table-pagination">
    <commonPagination @size-change="changeSize"  @current-change="changePage" :total="100"></commonPagination>
  </div>
 </div>
</template>

<script setup lang="ts">
import commonPagination from '../commonPagination.vue'

interface tableDataItem {
  date:string,
  name:string,
  address:string,
  [key:string]:any
}
interface itemCongig {
  slotName?:string,
  type?:string,
  prop:string,
  label:string,
  width?:number|string,
  [key:string]:any
}
const props = defineProps({
  tableData:Array<tableDataItem>,
  dataConfig:Array<itemCongig>
})
const changeSize = (size:Number)=>{
  console.log('size--',size)
}
const changePage = (page:Number)=>{
  console.log('page--',page)
}
const handleSelectionChange =  (val: tableDataItem[]) => {
  console.log('selection--',val)
}
</script>

<style lang="scss" scoped>
.table-container{
  padding: 10px;
  .table-pagination{
    display: flex;
    justify-content: flex-end;
    margin-top:10px;
  }
}

</style>
